/**
* Created by meizhao on 2020-03-28.
*/

<template>
    <div class="cont">
      <van-nav-bar
        title="个人设置"
        left-text=""
        left-arrow
        @click-left="onClickLeft"
      />
      <div class="list">
        <van-cell title="头像"  is-link>
          <van-uploader :after-read="onRead2" class="upimg">
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <img :src="avater.avatar" style="width: 30px;height: 30px;">
          </template>
          </van-uploader>
          <van-icon />
        </van-cell>

        <van-cell title="年龄" is-link>
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <input  style="width:30px" v-model="modif.age"/>
          </template>
        </van-cell>
        <van-cell title="入职日期" :value="modif.entryTime" />
        <van-cell title="工作年限" :value="modif.workYear" />

        <van-cell title="所属部门" :value="modif.departmentName" />
        <van-cell title="岗位" :value="modif.postName" />
        <van-cell title="阶梯工资等级" :value="modif.salaryName" />
        <van-cell title="联系电话" is-link>
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <input  style="width:100px" v-model="modif.phone"/>
          </template>
        </van-cell>
      </div>
      <div class="btn-login">修改密码</div>
    </div>
</template>

<script type="text/ecmascript-6">
  import { getUserAllInfo,updateUserInfo,updateAvater} from '../../../api/index.js'
  import axios from 'axios'
  export default {
    data () {
      return {
        modif:'',
        age:'',
        avater:''
      }
    },
    methods: {
      async onRead2(file) {
        let content = file.file;
        let data = new FormData();
        data.append('file',content);
        let avatar = await updateAvater(data)
        this.avater=avatar.data
        console.log('我是头像'+this.avater.avatar)
      },

      onClickLeft() {
          this.save()
          this.$router.push({path:'../Message'})
      },

      //数据
      async modification () {
        let msg = await getUserAllInfo()
        this.modif = msg.data
        this.avater=msg.data
      },
      //保存年龄  手机号码
      async save () {
        const data = {
          age: this.modif.age,
          phone: this.modif.phone,
        }
        let result = await updateUserInfo(data)

      },
    },
    mounted(){
      this.modification()
    },
    components: {

    }
  }
</script>

<style>
  body {
    width: 100%;
    height: 100%;
    position: relative;
    background: #ebebeb
  }
</style>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  .cont
    .list
      margin-top:15px;
    .btn-login
      width: 100%;
      height: 80px;
      background: #FFFFFF;
      color: #009EEA;
      line-height: 80px;
      font-size: 30px;
      margin-top: 20px;
      text-indent: 40px;
      text-align center
      font-weight 600
</style>
